<template>
  <div style="border-bottom:1px solid #eee">

    <div class="panel-container">
      <van-row type="flex" align="center" justify="space-between">
        <van-col><b class="L-text L-bold-text">{{itemdata.title}}</b></van-col>
        <van-col style="text-align:right">
        </van-col>
      </van-row>
    </div>
    <div ref="chart" style="height:250px;"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const props = defineProps({
  itemdata: {
    type: Object,
    default: {},
  },
});

const chart = ref(null);

onMounted(() => {
  initChart();
});



function initChart() {
  let chartDom = chart.value;

  let myChart = echarts.init(chartDom);
  const { itemdata } = props;

  var iflegend = itemdata.iflegend;
  var nametxt = "";
  if (iflegend) {
    nametxt = itemdata.nametxt;
  }
  var ynametxt = itemdata.ynametxt;
  // var title = itemdata.title

  var seriesval = itemdata.seriesval;
  var seriestxt = itemdata.seriestxt;
  var inter = itemdata.interval;
  inter = parseInt(inter);
  var serie = [];
  for (var i = 0; i < seriesval.length; i++) {
    var item;
    if (iflegend === "true") {
      item = {
        name: nametxt[i],
        yAxisIndex: seriestxt[i][0],
        type: itemdata.shape,
        data: seriesval[i],
        smooth: true,
      };
    } else {
      item = {
        yAxisIndex: seriestxt[i][0],
        type: itemdata.shape,
        data: seriesval[i],
        smooth: true,
      };
    }
    serie.push(item);
  }

  // var colors = ['#ee6666', '#fc8452', '#fac858'];
  // /* var colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']; */
  var colors = itemdata.colors;

  // 指定图表的配置项和数据
  var option;
  if (itemdata.xja2.length > 0) {
    option = {
      // title: {
      //   text: title
      // },
      color: colors,
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      toolbox: {
        feature: {
          restore: {
            show: true,
          },

          // 各工具配置项
          dataView: {
            show: true,
            readOnly: false,
            optionToContent: function (opt) {
              var axisdata = opt.xAxis[0].data;
              var series = opt.series;
              var table =
                '<table class="layui-table"><tbody><tr class="">' +
                '<td class="">' +
                "" +
                "</td>" +
                '<td class="">' +
                series[0].sname +
                "</td>" +
                '<td class="">' +
                series[1].sname +
                "</td>" +
                '<td class="">' +
                series[2].sname +
                "</td>" +
                "</tr>";
              for (var i = 0, l = series[0].data.length; i < l; i++) {
                table +=
                  '<tr class="">' +
                  '<td class="">' +
                  axisdata[i].value +
                  "</td>" +
                  '<td class="">' +
                  series[0].data[i].value +
                  "</td>" +
                  '<td class="">' +
                  series[1].data[i].value +
                  "</td>" +
                  '<td class="">' +
                  series[2].data[i].value +
                  "</td>" +
                  "</tr>";
              }
              table += "</tbody></table>";
              return table;
            },
          }, // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
          magicType: {
            show: true,
            type: ["bar", "line"],
          }, // 动态类型切换
          saveAsImage: {
            show: false,
          }, // 保存为图片
          right: 10,
          showTitle: false,
        },
      },
      grid: {
        left: "3%",
        right: "0%",
        bottom: "3%",
        containLabel: true,
      },
      legend: {
        data: nametxt,
      },
      dataZoom: [
        {
          type: "slider", // slider表示有滑动块的，inside表示内置的
          show: true,
          height: 20,
          xAxisIndex: [0],
          start: 60,
          end: 100,
        },
      ],
      xAxis: [
        {
          type: "category",
          data: itemdata.xja2,
          axisPointer: {
            type: "shadow",
          },
          axisTick: { length: 20 },
          axisLabel: {
            show: true,
            interval: inter,
            formatter: function (value) {
              var ret = ""; // 拼接加\n返回的类目项
              var maxLength = 1; // 每项显示文字个数
              var valLength = value.length; // X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
              if (rowN > 1) {
                // 如果类目项的文字大于4,
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; // 每次截取的字符串
                  var start = i * maxLength; // 开始截取的位置
                  var end = start + maxLength; // 结束截取的位置
                  // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; // 凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            },
          },
        },
        {
          type: "category",
          data: itemdata.xja1,
          axisPointer: {
            type: "shadow",
          },
          position: "bottom",
          offset: 65,
          axisLabel: {
            show: true,
            interval: 3,
          },
          axisTick: { length: 50 },
          splitArea: {
            show: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: ynametxt[0],
          offset: 1,
          axisLabel: {
            formatter: "{value}",
          },
          splitLine: {
            show: false,
          },
          minInterval: 1,
        },
        {
          type: "value",
          name: ynametxt[1],
          min: 0,
          offset: -9,
          axisLabel: {
            formatter: "{value}",
          },
          splitLine: {
            show: false,
          },
          minInterval: 1,
        },
      ],
      series: serie,
    };
  } else {
    // let start = 0
    // 先写死
    // let widthval = 18
    // start = (itemdata.xja1.length - widthval) / itemdata.xja1.length * 100
    option = {
      // title: {
      //   text: title
      // },
      color: colors,
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      toolbox: {
        feature: {
          restore: {
            show: false,
          },
          // 各工具配置项
          dataView: {
            show: false,
            readOnly: false,
            optionToContent: function (opt) {
              var axisdata = opt.xAxis[0].data;
              var series = opt.series;
              var table =
                '<table class="layui-table"><tbody><tr class="">' +
                '<td class="">' +
                "" +
                "</td>" +
                '<td class="">' +
                series[0].sname +
                "</td>" +
                '<td class="">' +
                series[1].sname +
                "</td>" +
                '<td class="">' +
                series[2].sname +
                "</td>" +
                "</tr>";
              for (var i = 0, l = series[0].data.length; i < l; i++) {
                table +=
                  '<tr class="">' +
                  '<td class="">' +
                  axisdata[i].value +
                  "</td>" +
                  '<td class="">' +
                  series[0].data[i].value +
                  "</td>" +
                  '<td class="">' +
                  series[1].data[i].value +
                  "</td>" +
                  '<td class="">' +
                  series[2].data[i].value +
                  "</td>" +
                  "</tr>";
              }
              table += "</tbody></table>";
              return table;
            },
          }, // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
          magicType: {
            show: true,
            type: ["bar", "line"],
            title: {
              line: "切换为折线图",
              bar: "切换为柱状图",
            },
          }, // 动态类型切换
          saveAsImage: {
            show: false,
          }, // 保存为图片
          right: 10,
          showTitle: false,
        },
      },
      grid: {
        left: "3%",
        right: "0%",
        bottom: "3%",
        containLabel: true,
      },
      legend: {
        data: nametxt,
      },
      dataZoom: [
        {
          type: "slider", // slider表示有滑动块的，inside表示内置的
          /* type:'inside',//slider表示有滑动块的，inside表示内置的 */
          show: true,
          xAxisIndex: [0],
          start: 0,
          brushSelect: false,
          end: 100,
        },
        {
          /* type:'slider',//slider表示有滑动块的，inside表示内置的  */
          type: "inside", // slider表示有滑动块的，inside表示内置的
          show: true,
          xAxisIndex: [0],
          start: 0,
          brushSelect: false,
          end: 100,
        },
      ],

      xAxis: [
        {
          type: "category",
          data: itemdata.xja1,
          axisPointer: {
            type: "shadow",
          },
          position: "bottom",
          splitNumber: 100,
          axisLabel: {
            show: true,
            interval: inter,
            rotate: 30,
          },
          axisTick: { length: 10 },
          splitArea: {
            show: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: ynametxt[0],
          offset: 1,
          axisLabel: {
            formatter: "{value}",
          },
          splitLine: {
            show: false,
          },
          minInterval: 1,
        },
        {
          type: "value",
          name: ynametxt[1],
          min: 0,
          offset: -9,
          axisLabel: {
            formatter: "{value}",
          },
          splitLine: {
            show: false,
          },
          minInterval: 1,
        },
      ],
      series: serie,
    };
  }
  option.legend.show = iflegend;
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
</script>
<style  scoped>
.panel-container {
  box-sizing: border-box;
  padding: 10px 5px;
  /* background: #000; */
}

.echart-box {
  width: 150px;
  height: 150px;
  /* border: 3px solid pink; */
  /* margin: 20px auto; */
}
</style>
